<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex row">
			<view :class="[ tabType==0 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(0)">
				<text :class="[ tabType==0 ? 'top-item-title-active':'top-item-title']">全部订单</text>
				<view :class="[ tabType==0 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==1 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(1)">
				<text :class="[ tabType==1 ? 'top-item-title-active':'top-item-title']">待支付</text>
				<view :class="[ tabType==1 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==2 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(2)">
				<text :class="[ tabType==2 ? 'top-item-title-active':'top-item-title']">已完成</text>
				<view :class="[ tabType==2 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" 
			:down="downOption" :up="upOption" top="200rpx">
			<view class="item-view flex" v-for="(item,index) in dataList" :key="index">
				<view class="item-title-view flex row aCenter">
					<text class="item-order-no">订单号：{{item.order_sn}}</text>
					<text class="status-text" :class="[item.pay_status == 1 ? 'status-pay' : '']">{{item.pay_status == 1 ? '待付款': '交易完成'}}</text>
				</view>
				<view class="content-view flex row aCenter">
					<image class="goods-icon" :src="item.goods_image"></image>
					<view class="flex-1 content-right flex">
						<view class="flex row aCenter">
							<text class="flex-1 goods-title">P.T.2黄河路店</text>
							<text class="goods-title">桌位：{{item.table_number}}</text>
						</view>
						<text class="goods-price">订单总价:￥{{item.order_amount}}</text>
						<text class="goods-hint">{{item.createtime}}</text>
					</view>
				</view>
				<view class="bottom-view flex row aCenter">
					<view v-if="item.pay_status == 1" class="bom-btn flex center" @click.stop="goPay(item)">
						确认支付
					</view>
					<view class="bom-btn flex center" @click.stop="goDetail(item)">
						查看详情
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [],
				
				tabType: 0, // 0 1 2
			}
		},
		methods: {
			updataTabType (type) {
				this.tabType = type;
				this.mescroll.resetUpScroll();
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					type: this.tabType,
				}
				console.log(params);
				this.$request("api/order/order_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							if(page.num == 1){
								this.dataList = data;
							}else{
								this.dataList = this.dataList.concat(data);
							}
							this.mescroll.endSuccess(data.length);
						}else{
							this.mescroll.endErr()
						}
					}).catch((e) => {
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
			goDetail (item) {
				uni.navigateTo({
					url: '/pages/role-user/details?id='+item.id,
				})
			},
			goPay (item) {
				// type =1 普通订单 type=2优惠券订单
				if(item.type == 1){
					uni.navigateTo({
						// url: '/pages/role-user/pay?data=' + JSON.stringify(item),
						url: '/pages/role-user/pay?totlePrice=' + item.order_amount + '&orderId=' + item.id,
					})
				}else if(item.type == 2){
					uni.navigateTo({
						// url: '../role-user/pay?data=' + JSON.stringify(data),
						url: '/pages/role-user/coupon-pay?totlePrice=' + item.order_amount + '&orderId=' + item.id,
					})
				}
			},
		}
	}
</script>

<style scoped>
	.box {
		background-color: #010B24;
	}
	.top-view {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
	}
	.top-item {
		flex: 1;
		height: 100rpx;
	}
	.top-item-active {
		flex: 1;
		height: 100rpx;
	}
	.top-item-title {
		font-size: 30rpx;
		color: #FFFFFFCC;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-title-active {
		font-size: 30rpx;
		color: #FFF;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-line {
		width: 75rpx;
		height: 5rpx;
		background-color: #010B24;
		border-radius: 3rpx;
	}
	.top-item-line-active {
		width: 75rpx;
		height: 5rpx;
		background-color: #FFF;
		border-radius: 3rpx;
	}
	.item-view {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 12rpx;
		margin-bottom: 7rpx;
		background-color: #FFF;
		border-radius: 18rpx;
		padding: 0 26rpx;
	}
	.item-title-view {
		padding: 18rpx 0;
		border-bottom: 1rpx solid #F2F2F2;
	}
	.item-order-no {
		font-size: 28rpx;
		color: #222222;
		flex: 1;
	}
	.status-text {
		font-size: 26rpx;
		color: #6B6B6B;
	}
	.status-pay {
		font-size: 26rpx;
		color: #8C48E9;
	}
	.content-view {
		padding: 16rpx 0;
	}
	.goods-icon {
		width: 134rpx;
		height: 134rpx;
		background-color: #F2F2F2;
	}
	.goods-title {
		font-size: 28rpx;
		color: #222222;
	}
	.goods-price {
		font-size: 28rpx;
		color: #222222;
		font-weight: bold;
		margin: 6rpx 0;
	}
	.goods-hint {
		font-size: 26rpx;
		color: #8D8D8D;
	}
	.content-right {
		padding-left: 15rpx;
	}
	
	.bottom-view {
		border-top: 1rpx solid #F2F2F2;
		padding: 18rpx 0;
		justify-content: flex-end;
	}
	.bom-btn {
		padding: 8rpx 30rpx;
		border: 1rpx solid #B6B6B6;
		background-color: #FFF;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #222222;
		margin-left: 23rpx;
	}
	.bom-btn:active {
		background-color: #F0F0F0;
	}
</style>
